<template>
	<view>
		<u-notice-bar :text="text1"></u-notice-bar>
		<view class="balance-harder">
			<view class="balance-harder-1">
				<view class="balance-harder-2">零钱余额（元）</view>
				<view class="balance-harder-3">{{getBalance}}</view>
				<view class="balance-harder-4">邮费、话费充值等无法使用零钱支付，详细规则……</view>
			</view>
		</view>
		<view class="balance-mid">
			<u-grid :border="true" col="3">
				<u-grid-item v-for="(listItem,listIndex) in list"  :key="listIndex" @click="click">
					<view class="balance-mid-1" :class="{active:listIndex == active}">
						<view>充</view>
						<view class="grid-text">{{listItem.title}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="balance-fooder">
			<u-button shape="circle" text="去充值" @click="recharge"
				color="linear-gradient(to right, rgb(255, 119, 1), rgb(255, 93, 0))"></u-button>
		</view>
		<view class="balance-foo">

			<view class="">
				使用充值代表同意
			</view>
			<view class="balance-foo-link">
				<u-link style="" href="https://uviewui.com/" text="《个人信息处理规则》" @click="click"></u-link>
				<u-link style="" href="https://uviewui.com/" text="《个人信息处理规则》" @click="click"></u-link>
			</view>
			由我方提供资金安全保障
		</view>
		<myModal v-if='myModal' contents="确定充值吗?" @confirm="confirm" @cancel="cancel"></myModal>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from "vuex"
	export default {
		data() {
			return {
				text1: "用这张充值卡,跃跃欲试,狂欢智慧购,毫不吝啬,让你的红利毋庸置疑!",
				list: [{
						name: 'photo',
						title: '10'
					},
					{
						name: 'lock',
						title: '20'
					},
					{
						name: 'star',
						title: '30'
					},
					{
						name: 'hourglass',
						title: '50'
					},
					{
						name: 'home',
						title: '100'
					},
					{
						name: 'star',
						title: '200'
					},
				],
				active:0,
				myModal:false,
				meney:"0.00",

			};
		},
		computed:{
			...mapState("rechargeComments",["balance"]),
			...mapGetters("rechargeComments",["getBalance"])
		},
		onLoad(){
			uni.$setNavigationBarColor()
		},
		methods: {
			...mapMutations("rechargeComments",["addBalance"]),
			//充值
			recharge(){
				this.myModal = true
			},
			confirm(){
				this.addBalance(this.meney)
				this.cancel()
			},
			cancel(){
				this.myModal = false
			},
			click(name) {
				this.meney =  Number(this.list[name].title)
				this.active = name
			}
		}
	}
</script>

<style lang="scss">
	.active{
		color: #fd4627;
	}
	.balance-foo {
		position: absolute;
		bottom: 30px;
		right: 0;
		left: 0;
		text-align: center;
		margin: 0 auto;
		width: 90%;
		font-size: 14px;

		.balance-foo-link {

			display: flex;
			justify-content: center;
		}
	}

	.balance-fooder {
		width: 90%;
		margin: 40px auto;
	}

	.balance-mid {
		margin-top: 30px;
		font-weight: 800;

		.balance-mid-1 {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30px;

		}
	}

	.grid-text {
		font-size: 14px;

		// padding: 10rpx 0 20rpx 0rpx;
		margin-left: 10rpx;
		box-sizing: border-box;

	}

	.balance-harder {
		background-color: #fd4627;
		width: 90%;
		color: white;
		margin: 20rpx auto;
		height: 350rpx;
		border-radius: 15px;

		.balance-harder-4 {
			font-size: 13px;
			margin: 20px 0;

		}

		.balance-harder-1 {

			display: flex;
			flex-direction: column;
			justify-content: center;

			align-items: center;

		}

		.balance-harder-2 {
			margin-top: 30px;
			margin-bottom: 15px;
			// margin: 30px 0; 
			font-size: 14px;
		}

		.balance-harder-3 {

			font-size: 40px;
		}
	}
</style>